<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        :formProp="formData"
        @search="search"
        @change="searchChange"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
      >
        <div class="ccui-tab-wrapper">
          <el-button
            :type="isActive === index ? 'table-top-active' : 'table-top'"
            size="mini"
            v-for="(item, index) in focuses"
            :key="index"
            @click="tabChange(item.focus)"
          >
            <template
              v-if="item.focus === 'applicationAll' && totalNum !== null"
              >全部{{ isActive === 0 ? ` (${totalNum})` : "" }}
            </template>
            <template
              v-else-if="
                item.focus === 'applicationTobesubmitted' && totalNum !== null
              "
              >待提交{{ isActive === 1 ? ` (${totalNum})` : "" }}
            </template>
            <template
              v-else-if="
                item.focus === 'applicationUnderapproval' && totalNum !== null
              "
              >审批中{{ isActive === 2 ? ` (${totalNum})` : "" }}
            </template>
            <template
              v-else-if="
                item.focus === 'applicationReturn' && totalNum !== null
              "
              >审批退回{{ isActive === 3 ? ` (${totalNum})` : "" }}
            </template>
          </el-button>
        </div>
        <div class="ccui-extend-btn">
          <el-button
            size="mini"
            type="primary"
            icon="icon-ccui-add-sup"
            @click="handleGoNew"
            >新增
          </el-button>
        </div>
        <template slot="search">
          <el-input
            v-model="formData.paymentName"
            clearable
            searchLabel="付款申请单名称"
            placeholder="请输入付款申请单名称模糊查询"
            @blur="handleTrim('paymentName')"
          />
          <el-input
            v-model="formData.paymentCode"
            clearable
            searchLabel="付款申请单编号"
            placeholder="请输入付款申请单编号模糊查询"
            @blur="handleTrim('paymentCode')"
          />
          <el-input
            v-model="formData.contractCode"
            clearable
            searchLabel="合同编号"
            placeholder="请输入合同编号模糊查询"
            @blur="handleTrim('contractCode')"
          />

          <el-input
            v-model="formData.contractName"
            clearable
            searchLabel="合同名称"
            placeholder="请输入合同名称模糊查询"
            @blur="handleTrim('contractName')"
          />
          <el-select
            v-model="formData.paymentMode"
            placeholder="请选择申请付款方式"
            searchLabel="申请付款方式"
          >
            <el-option
              v-for="item in partyStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="formData.reportInOrgName"
            clearable
            searchLabel="填报单位"
            placeholder="请输入填报单位模糊查询"
            @blur="handleTrim('reportInOrgName')"
          />
          <el-input
            v-model="formData.payee"
            clearable
            searchLabel="收款人"
            placeholder="请输入收款人模糊查询"
            @blur="handleTrim('payee')"
          />
          <el-date-picker
            v-model="formData.reportTime"
            searchLabel="编制时间"
            clearable
            type="date"
            placeholder="请选择编制时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </template>
        <!-- 表单高级搜索 -->

        <el-input
          v-model="formData.paymentName"
          clearable
          searchLabel="付款申请单名称"
          placeholder="请输入付款申请单名称模糊查询"
          slot="searchItem1"
          @blur="handleTrim('paymentName')"
        />
        <el-input
          v-model="formData.paymentCode"
          clearable
          searchLabel="付款申请单编号"
          placeholder="请输入付款申请单编号模糊查询"
          slot="searchItem2"
          @blur="handleTrim('paymentCode')"
        />
        <el-input
          v-model="formData.contractCode"
          clearable
          searchLabel="合同编号"
          placeholder="请输入合同编号模糊查询"
          slot="searchItem3"
          @blur="handleTrim('contractCode')"
        />
        <el-input
          v-model="formData.contractName"
          clearable
          searchLabel="合同名称"
          placeholder="请输入合同名称模糊查询"
          slot="searchItem4"
          @blur="handleTrim('contractName')"
        />
        <el-select
          v-model="formData.paymentMode"
          placeholder="请选择申请付款方式"
          searchLabel="申请付款方式"
          slot="searchItem5"
        >
          <el-option
            v-for="item in partyStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="formData.reportInOrgName"
          clearable
          searchLabel="填报单位"
          placeholder="请输入填报单位模糊查询"
          slot="searchItem6"
          @blur="handleTrim('reportInOrgName')"
        />
        <el-input
          v-model="formData.payee"
          clearable
          searchLabel="收款人"
          placeholder="请输入收款人模糊查询"
          slot="searchItem7"
          @blur="handleTrim('payee')"
        />
        <el-date-picker
          v-model="formData.reportTime"
          searchLabel="编制时间"
          clearable
          type="date"
          placeholder="请选择编制时间"
          format="yyyy-MM-dd"
          slot="searchItem8"
          value-format="yyyy-MM-dd"
        />
      </el-search>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :fit="true"
        border
        class="ccui-multifunctional-table"
        max-height="20000"
        @cell-click="cellClick"
        :cell-style="cellStyle"
      >
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :formatter="formatterList[table.formatterName]"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
          ></el-table-column>
        </template>

        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.approvalStatus == 1 ||
                scope.row.approvalStatus == 2 ||
                scope.row.approvalStatus == 6
              "
              size="mini"
              type="text"
              @click="handleGoEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              v-if="
                scope.row.approvalStatus == 1 || scope.row.approvalStatus == 2
              "
              size="mini"
              type="text"
              @click="handleDelete(scope.row, '')"
              >删除
            </el-button>
            <el-button
              v-if="scope.row.approvalStatus == 3"
              size="mini"
              type="text"
              @click="handleRevoke(scope.row)"
              >撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer" v-show="isShowPagination">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="getLocalPageSize()"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @size-change="
              (val) => {
                handleSizeChange(val, '');
              }
            "
            @current-change="
              (val) => {
                handleCurrentChange(val, '');
              }
            "
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSessionItem, setSessionItem } from "@/basa/utils";
import { qryList, withdrawPayment, deletePayment } from "./apis/index.js";
export default {
  name: "allList",
  data() {
    return {
      isActive: 1,
      focuses: [
        { focus: "applicationAll" },
        { focus: "applicationTobesubmitted" },
        { focus: "applicationUnderapproval" },
        { focus: "applicationReturn" },
      ],
      formData: {
        approvalStatus: "2",
        pageNo: 1,
        pageSize: 10,
      },
      // 高级搜索相关
      isShowSearch: true,
      tableData: [],
      // 表格数据处理
      formatterList: {},
      // 分页相关
      isShowPagination: false,
      totalNum: 0,
      pageNoCode: 1,
      pageSizeCode: this.getLocalPageSize(),
      tableName: this.tableList.applicationTobesubmitted,
      tableColumnData: [
        {
          label: "序号",
          type: "index",
          fixed: true,
        },
        {
          label: "付款申请单编号",
          prop: "paymentCode",
          width: "140",
          fixed: true,
        },
        {
          label: "付款申请单名称",
          prop: "paymentName",
          width: "130",
        },
        {
          label: "合同编号",
          prop: "contractCode",
          width: "120",
        },
        {
          label: "合同名称",
          prop: "contractName",
          width: "100",
        },
        {
          label: "填报单位",
          prop: "reportInOrgName",
          width: 150,
        },
        {
          label: "收款人",
          prop: "payee",
          width: 80,
        },
        {
          label: "申请付款方式",
          prop: "paymentModeStr",
          width: 100,
        },
        {
          label: "申请付款金额",
          prop: "paymentMoney",
          width: 100,
        },
        {
          label: "币种",
          prop: "currencyName",
          width: 100,
        },
        {
          label: "编制人",
          prop: "reportUsername",
          width: 70,
        },
        {
          label: "编制日期",
          prop: "reportTimeStr",
          width: 100,
        },
        {
          label: "单据状态",
          prop: "approvalStatusStr",
          width: 70,
        },
      ],
      partyStatus: [
        {
          label: "银行承兑",
          value: "1",
        },
        {
          label: "商业承兑",
          value: "2",
        },
        {
          label: "供应链金融",
          value: "3",
        },
        {
          label: "现金",
          value: "4",
        },
      ],
    };
  },
  created() {
    this.getList(2);
  },
  methods: {
    // 表格数据获取
    getList(reqObj) {
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.pageNo = this.pageNoCode;
      obj.pageSize = this.pageSizeCode;
      obj.approvalStatus = '2';
      obj.isShowPageLoading = true;
      obj.loadingMessage = "加载中,请稍等...";
      qryList(obj).then((res) => {
        console.log(res.data.data.rows);
        if (res.data.data.rows.length) {
          this.tableData = res.data.data.rows.map((n) => ({
            ...n,
            // 付款金额
            paymentMoney:
              n.paymentMoney == "" ? "" : Number(n.paymentMoney).toFixed(2),
          }));
        } else {
          this.tableData = [];
        }
        this.totalNum = res.data.data.recordsTotal; //总记录条数
        this.pageNoCode = res.data.data.pageNo; // 当前页
        this.tableData.length == 0
          ? (this.isShowPagination = false)
          : (this.isShowPagination = true);
      });
    },
    // Tab切换
    tabChange(data) {
      console.log(data, "Tab切换");
      this.$router.push(`/paymentManagement/application/${data}`);
    },
    // 高级搜索切换清空
    searchChange(val) {
      this.formData = {
        approvalStatus: "2",
        pageNo: 1,
        pageSize: 10,
      };
    },
    // 单元格点击跳转详情
    cellClick(r, column) {
      if (column.label === "付款申请单编号" && r.paymentCode !== "") {
        // add-新增 look-查看 edit-编辑
        const params = {
          id: r.id,
          status: "look",
        };
        this.$router.push(
          `/paymentManagement/application/detail/${JSON.stringify(params)}`
        );
      }
    },
    // 编辑
    handleGoEdit(r) {
      // add-新增 look-查看 edit-编辑
      const params = {
        id: r.id,
        status: "edit",
      };
      this.$router.push(
        `/paymentManagement/application/detail/${JSON.stringify(params)}`
      );
    },
    // 新增
    handleGoNew() {
      // add-新增 look-查看 edit-编辑
      const params = {
        status: "add",
      };
      this.$router.push(
        `/paymentManagement/application/detail/${JSON.stringify(params)}`
      );
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label == "付款申请单编号") {
        return { color: "#0089EF", cursor: "pointer" };
      }
      if (column.label == "申请付款金额") {
        return { textAlign: "right" };
      }
    },
    // 获取默认分页
    getLocalPageSize() {
      return (
        getSessionItem("pageSize", this.tableList.applicationTobesubmitted) ||
        10
      );
    },
    // 显示条数更改
    handleSizeChange(val) {
      this.pageNoCode = 1;
      if (val !== "none") {
        this.pageSizeCode = val;
        setSessionItem("pageSize", this.tableName, val);
      }
      this.getList(2);
    },
    // 当前页码更改
    handleCurrentChange(val) {
      let searchFormData = getSessionItem("pageNo", this.tableName) || {};
      setSessionItem("pageNo", this.tableName, {
        pageNo: val,
        searchForm: searchFormData.searchForm || {},
      });
      this.formDataSearch = {
        ...this.formDataSearch,
        ...searchFormData.searchForm,
      };
      this.pageNoCode = val;
      this.getList(this.formDataSearch);
    },
    // 高级搜索
    search(searchData) {
      this.pageNoCode = 1;
      this.formDataSearch = JSON.parse(JSON.stringify(searchData));
      this.localSearchData = JSON.parse(JSON.stringify(searchData));
      setSessionItem("pageNo", this.tableName, {
        pageNo: this.pageNoCode,
        searchForm: this.localSearchData,
      });
      this.getList(this.formDataSearch);
    },
    // 撤回
    handleRevoke(row) {
      this.$confirm("您确定要撤回吗？", "撤回确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "撤回",
        cancelButtonText: "取消",
        customClass: "ccui-message-box-custom",
        closeOnClickModal: false,
      }).then(() => {
        let obj = {};
        obj.id = row.id;
        this.$loading({
          lock: true,
          text: "撤回中,请稍后...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        console.log(obj);
        withdrawPayment(obj)
          .then((res) => {
            console.log(res);
            this.$loading().close();
            this.$message({
              message: "撤回成功",
              type: "success",
              duration: 3000,
              showClose: true,
              ccuiCustom: true,
            });
            this.getList(2);
          })
          .catch((e) => {
            console.log(e);
            this.$loading().close();
          });
      });
    },
    // 删除
    handleDelete(row) {
      this.$confirm("您确定要删除吗？", "删除确认", {
        distinguishCancelAndClose: true,
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        customClass: "ccui-message-box-custom",
        closeOnClickModal: false,
      }).then(() => {
        this.$loading({
          lock: true,
          text: "删除中,请稍后...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        let obj = {};
        obj.id = row.id;
        deletePayment(obj)
          .then((res) => {
            this.$loading().close();
            if (res.data.code == "0") {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 3000,
                showClose: true,
                ccuiCustom: true,
              });
              this.dialogVisible = false;
              this.getList(2);
            }
          })
          .catch((e) => {
            this.$loading().close();
            this.dialogVisible = false;
            this.$message({
              showClose: true,
              message: "删除失败",
              type: "error",
              ccuiCustom: true,
              duration: 8000,
            });
          });
      });
    },
    // 清空名称空格
    handleTrim(key) {
      if (this.formData[key] == undefined) return;
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
  },
  activated() {
    this.pageNoCode = 1;
    this.getList(2);
  },
};
</script>

<style scoped lang="scss">
.ccui-tab-wrapper {
  padding-top: 0px !important;
}

/deep/ .el-searchs-box {
  width: 406px !important;
}
/deep/
  .ccui-advanced-search-wrapper
  .el-search
  .el-searchs-bottom
  .el-form-item
  .el-form-item__label {
  width: 107px !important;
}
</style>
